<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象选项卡</title>
    <style>
        *{ padding:0; margin:0; list-style:none;font-family: "Microsoft Yahei"}
        div{ width:300px; height:280px; margin:100px auto;
            border:1px solid #ccc;padding-top:10px;}
        input{ width:80px; float:left; height:34px;background: #a2ffc7;
        color:#fff;font-size:16px;outline:none;border:0;
        margin:10px;cursor:pointer;
        }
        .active{ background: rgba(255, 69, 0, 0.55); color:#FFF;}
        li{ width:200px; height:200px; background:deepskyblue;
            font-size:100px;text-align:center; line-height:200px;
            color: #ffffff; display:none;margin-left:50px;}
        ul .show{ display:block;}
        section{ overflow:hidden;}
    </style>
</head>
<body>
<div class="tab">
    <section class="sec">
        <input class="active" type="button" value="按钮1" />
        <input type="button" value="按钮2" />
        <input type="button" value="按钮3" />
    </section>
    <ul>
        <li class="show">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>


<script type="text/javascript">


class Tab {
    constructor(){
       this.aBtn = document.querySelectorAll(".sec input");
       this.ali = document.querySelectorAll(".tab li");
    }
    show(){
        var _this=this;
        for(let i=0; i<this.aBtn.length;i++){
            this.aBtn[i].onclick=function(){
                _this.fn(i);
            };
        }
    }
    fn(i){
        for(var j=0;j<this.ali.length;j++){
            this.aBtn[j].className='';
            this.ali[j].className='';
        }
        this.ali[i].className='show';
        this.aBtn[i].className='active';
    }
}

    window.onload = function(){
        new Tab().show()
    }

</script>
</body>
</html>